<template>
  <basic-container>
    <avue-crud
      :data="data"
      :page.sync="page"
      :option="option"
      @row-del="rowDel"
      v-model="obj"
      ref="crud"
      @row-save="rowSave"
      @on-load="onlists"
      @row-update="rowUpdate"
      :table-loading="orderLoading"
      @search-change="searchChange"
      @toggleSelection="toggleSelection"
      @selection-change="selectionChange"
    >
      <template slot-scope="scope" slot="menu">
        <el-button type="text" @click.stop="onrowEdits(scope.row,scope.index)">编辑</el-button>
      </template>
      <template slot="menuLeft" slot-scope="{size}">
        <el-button type="danger" :size="size" @click="toggleSelection()">多选删除（ 已选{{selectLen}} ）</el-button>
      </template>
    </avue-crud>
  </basic-container>
</template>

<script>
import {dmList,dmadduserList,dmupdateuserList,dmgetList,dmdeleteuserList} from "@/api/scriptTag";
export default {
  data() {
    return {
      data: [],
      obj:{},
      query:{},
      selectLen: 0,
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0,
        "pageSizes": [
          10,
          20,
          30,
          40,
          50,
          100
        ],
        "background": true
      },
      orderLoading: false,
      option:{
        align:'center',
        menuAlign:'center',
        menuWidth:400,
        selection: true,
        tip: false,
        editBtn: false,
        viewBtn:false,
        menuTitle:'操作',
        addTitle: '保存',
        editTitle: '编辑标签',
        searchBtnText:'搜索',
        emptyBtnText:'清空',
        addBtnText:'新增标签',
        delBtnText:'删除',
        delBtnIcon:'null',
        editBtnIcon:'null',
        editBtnText:'编辑',
        updateBtnText:'保存',
        saveBtnText:'保存',
        cancelBtnText:'取消',
        column:[
          {
            label:'标签名称',
            prop:'name',
            rules: [{
              required: true,
              message: "请输入标签名称",
              trigger: "blur"
            }],
          }]
      },
    };
  },
  methods: {
    //更新
    onlists(page,params = {}) {
      this.orderLoading = true;
      dmList(page.currentPage, page.pageSize, Object.assign(params, this.query)).then((res) => {
        this.orderLoading = false;
        this.data = res.data.data.list
        this.page.total = res.data.data.total
      }).catch(error => {
        console.log(error)
      })
    },
    //搜索
    searchChange(params, done) {
      this.query = params;
      this.page.currentPage=1
      this.onlists(this.page, params);
      done();
    },
    //新增
    rowSave(row, loading) {
      loading();
      dmadduserList(row).then(() => {
        this.onlists(this.page);
        this.$message({
          type: "success",
          message: "操作成功!"
        });
      });
    },
    //更新
    rowUpdate(row, index, loading, done) {
      dmupdateuserList(row.id,this.obj).then(() => {
        loading();
        this.onlists(this.page);
        this.$message({
          type: "success",
          message: "操作成功!"
        });
      }, error => {
        done();
        console.log(error);
      });
    },
    // 删除
    rowDel(row,index,ids) {
      const idList = row.id || ids
      if(idList){
        this.$confirm("确定将选择数据删除?", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            return dmdeleteuserList(idList);
          })
          .then(() => {
            this.onlists(this.page);
            this.$message({
              type: "success",
              message: "操作成功!"
            });
          });
      }
    },
    //获取详情
    onrowEdits(row, index){
      this.$refs.crud.rowEdit(row, index)
      dmgetList(row.id).then((res) => {
        this.obj = res.data.data
      })
    },
    //多选删除
    toggleSelection(){
      this.selectLen = this.$refs.crud.selectLen
      const ids = this.$refs.crud.tableSelect.map(v=>{return v.id}).join(',')
      this.rowDel('','',ids)
    },
    selectionChange(){
      this.selectLen = this.$refs.crud.selectLen
    }
  }
}
</script>

<style>
.avue-form__menu--center{
  text-align: right;
}
</style>
